<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">商家管理</span>
    <el-button @click="beforeAddBusiness" type="primary" style="float:right;margin-top:13px;">新建商家</el-button>
  </div>
<!--  删除商家按钮  -->
  <el-table :data="businessList" style="width: 100%">
    <el-table-column prop="business_name" label="商家名称"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="deleteBusiness(scope.row.id)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  新增商家  -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="商家名称">
            <el-input placeholder="请输入商家名称" v-model="saveBusinessForm.business_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input placeholder="请输入内容" v-model="saveBusinessForm.business_password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="行业类型（餐饮、酒店、户外、美食、美妆、其他）">
            <el-select placeholder="请输入内容" v-model="saveBusinessForm.industry_type">
            <el-option v-for="item in businessTypeArr" :label="item.label"></el-option>
                            <el-option label="餐饮"></el-option>
                            <el-option label="酒店"></el-option>
                            <el-option label="户外"></el-option>
                            <el-option label="美食"></el-option>
                            <el-option label="美妆"></el-option>
                            <el-option label="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人姓名">
            <el-input placeholder="请输入内容" v-model="saveBusinessForm.business_head_name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="负责人电话">
            <el-input placeholder="请输入商家名称" v-model="saveBusinessForm.business_head_phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司地址">
            <el-input placeholder="请输入内容" v-model="saveBusinessForm.company_address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="营业执照">
            <el-input placeholder="请输入内容" v-model="saveBusinessForm.business_license"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商家简介">
            <el-input placeholder="请输入内容" v-model="saveBusinessForm.business_introduction"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="入驻时间">
            <el-input placeholder="请选择" v-model="saveBusinessForm.entry_time"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商家状态">
            <el-select placeholder="请选择" v-model="saveBusinessForm.business_status">
              <el-option v-for="item in batteryTypeArr" :label="item.label"></el-option>
                            <el-option label="审核"></el-option>
                            <el-option label="运行"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="审核备注">
            <el-input placeholder="请输入内容" v-model="saveBusinessForm.audit_remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="business_logo">
            <el-select placeholder="请选择"  v-model="saveBusinessForm.business_logo">
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveBusiness">确定</el-button>
    </template>
  </el-dialog>
<!--    -->
</template>

<script setup>

//控制新增车辆弹窗是否显示
import {ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";

const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增车辆');
//定义收集搜索框信息的对象
const searchVehicleFrom = ref({ brand: '', license: ''});
// 定义数组存储商家列表
const businessList = ref([]);

//定义关闭弹窗方法
const handleClose = () =>{
  if(confirm('您确认要关闭弹窗吗?')){
    saveBusinessForm.value = {};
    dialogVisible.value = false;
  }
}
//定义保存商家方法
const saveBusiness = () =>{
  axios.post(BASE_URL+'/admin/basic/business/info/save',saveBusinessForm.value).then((response)=>{
    if (response.data.code == 200){
      ElMessage.success(response.data.msg);
      dialogVisible.value = false;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//定义点击“新增商家”
const beforeAddBusiness = ()=>{
  dialogTitle.value = '新增商家';
  dialogVisible.value = true;
}
//定义对象来保存车辆表单的数据
const saveBusinessForm = ref({
  business_name:'',
  business_password:'',
  industry_type:'',
  business_head_name:'',
  business_head_phone:'',
  company_address:'',
  business_license:'',
  business_introduction:'',
  entry_time:'',
  business_status:'',
  audit_remarks:'',
  business_logo:''
});
//定义数组保存就业类型类型字典项
const businessTypeArr = ref([]);
const batteryTypeArr = ref([]);
// 定义删除商家方法
const deleteBusiness = (id) => {
  ElMessageBox.confirm('确定要删除该商家吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    axios.delete(BASE_URL+'/basic/business/info/delete/{id}')
        .then((response) => {
          if (response.data.code === 200) {
            ElMessage.success('商家删除成功');
            // 假设这里重新加载商家列表
            // loadBusinessList();
          } else {
            ElMessage.error(response.data.msg);
          }
        })
        .catch((error) => {
          ElMessage.error('删除失败，请稍后重试');
          console.error('删除商家失败:', error);
        });
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};
</script>

<style scoped>
  .dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: #333;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header ul {
  list-style-type: none;
  display: flex;
  gap: 1rem;
}

.header a {
  color: white;
  text-decoration: none;
}

.main-content {
  flex: 1;
  padding: 2rem;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}
</style>